<template>
  <div class="login" ref="loginForm">
    <span>
      <img src="./img/goback.png" @click="$router.back()" />
    </span>
    <form action="">
      <h2>账号登录</h2>
      <input type="text" id="username" placeholder="请输入手机号/邮箱" v-model="loginForm.userName" />
      <input type="text" id="password" placeholder="请输入密码" password="true" v-model="loginForm.password" />
      <button id="loginBtn" type="button" @click="deng()">登录</button>
    </form>
    <div class="myLogin">
      <router-link to="/phoneVerify">手机登录</router-link>
      <span>|</span>
      <a href="">忘记密码</a>
      <span>|</span>
      <a href="">注册</a>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import '../../service/index'

export default {
  data() {
    return {
      loginForm: {
        userName: '',
        password: '',
      },
    }
  },
  computed: {
    ...mapState(['res']),
  },
  mounted() {
    this.$store.dispatch('getLogin')
  },
  methods: {
    deng() {
      localStorage.setItem('userName', 'pamer')
      if (this.res.userName === this.loginForm.userName && this.res.password === this.loginForm.password) {
        this.$router.replace('/profile')
      } else {
        alert('用户名不正确或密码错误')
      }
    },
  },
}
</script>

<style scoped lang="stylus">
.login {
  height: 844px;
  background: #eeeeee;

  span {
    img {
      width: 15px;
      height: 20px;
      margin: 5px;
    }
  }

  form {
    width: 80%;
    margin: 0 auto;
    margin-top: 60px;

    h2 {
      margin: 0 auto;
      width: 100%;
      height: 40px;
      font-size: 40px;
      color: #ff2150;
      text-align: center;
      line-height: 40px;
      font-weight: bold;
      margin-bottom: 30px;
    }

    input {
      display: block;
      margin: 0 auto;
      margin-bottom: 10px;
      width: 300px;
      height: 18px;
      outline: none;
      padding: 10px;
      font-size: 13px;
      font: 400 14px Arial;
      border-sizing: border-box;
      border-radius: 4px;
      border: 1px solid #ddd;
    }

    button {
      width: 100%;
      height: 40px;
      background-color: #ff2150;
      border: 1px solid #ff2150;
      color: #ddd;
      border-radius: 4px;
      text-align: center;
      margin: 60px 0 0 4px;
    }

    button:active {
      box-shadow: 0 0 3px rgb(173, 172, 172);
    }
  }
}

.myLogin {
  width: 100%;
  height: 30px;
  margin-top: 100px;
  text-align: center;

  a {
    color: #ddd;
    font-size: 13px;
  }

  span {
    margin: 13px;
    font-size: 17px;
    color: #ffffff;
  }
}
</style>
